import * as echarts from "echarts";
import UI_STYLE from "@/assets/styles/platform-style";

export default {
  methods: {
    drawHealth() {
      let point = this.dataList.reduce((total, item) => {
        return Math.max(0, total - item.warning * 5 - item.critical * 1);
      }, 100);
      let axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#ff4026",
        },

        {
          offset: 0.5,
          color: "#d0ff19",
        },

        {
          offset: 1,
          color: "#19fdab",
        },
      ]);
      // 圆环渐变颜色
      axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#ff1e2e",
        },

        {
          offset: 0.5,
          color: "#fff000",
        },

        {
          offset: 1,
          color: "#50fcfc",
        },
      ]);

      let option = {
        series: [
          {
            center: ['50%', '55%'],
            name: "健康度",
            type: "gauge",
            z: 3,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "85%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 30,
                color: [[1, axislineColor]],
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              distance: -40,
              textStyle: {
                color: UI_STYLE.lightFont,
                fontSize: 12,
                fontWeight: 500,
              },
            },
            splitLine: {
              // 分隔线
              show: false,
            },
            title: {
              offsetCenter: [0, 18],
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: "white",
                fontSize: 20,
              },
            },
            detail: {
              offsetCenter: [0, 100],
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: "white",
                fontSize: 20,
                fontWeight: 700,
                offsetCenter: [0, "50%"],
              },
              formatter: function (value) {
                let remark;
                if (value < 60) {
                  remark = "糟糕";
                } else if (value < 80) {
                  remark = "中等";
                } else if (value < 90) {
                  remark = "良好";
                } else if (value < 100) {
                  remark = "优秀";
                } else {
                  remark = "完美";
                }
                return `${remark}`;
              },
            },
            pointer: {
              length: "85%",
            },
            itemStyle: {
              normal: {
                color: "#8492AA",
              },
            },
            data: [
              {
                value: point,
                name: "",
              },
            ],
          },
          {
            center: ['50%', '55%'],
            name: "",
            type: "gauge",
            z: 2,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "65%",
            axisLine: {
              // 坐标轴线
              show: false,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 0,
                color: [[1, axislineColor]],
              },
            },
            title: {
              show: false,
            },
            detail: { 
              show: false,
            },
            axisTick: {
              show: true,
              length: 15,
              lineStyle: {
                width: 3,
                color: "#979797",
              },
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              // 分隔线
              show: false,
            },
          },
        ],
      };
      if (!this.healthChart) {
        this.healthChart = echarts.init(this.$refs.healthChart, "macarons");
      }
      this.healthChart.setOption(option);
    },
  },
};
